<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="title" content="LayoutIt! - Bootstrap可视化布局系统">
  <meta name="description" content="LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统">
  <meta name="keywords" content="可视化,布局,系统">
  <title>Bootstrap可视化布局系统</title>

  <!-- Le styles -->
  <link href="./css/bootstrap-combined.min.css" rel="stylesheet">
  <link href="./css/layoutit.css" rel="stylesheet">
  <link rel="stylesheet" href="./js/skins/moono/editor.css">
  <link rel="stylesheet" href="./js/skins/moono/dialog.css">
  <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
  <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="shortcut icon" href="./img/favicon.png">

  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <!--[if lt IE 9]>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="./js/bootstrap-combined.min.js"></script>
  <script type="text/javascript" src="./js/jq.js"></script>
  <script type="text/javascript" src="./js/jquery.ui.touch-punch.min.js"></script>
  <script type="text/javascript" src="./js/jquery.htmlClean.js"></script>
  <script type="text/javascript" src="./js/ckeditor.js"></script>
  <script type="text/javascript" src="./js/config.js"></script>
  <script type="text/javascript" src="./js/scripts.js"></script>
  <style type="text/css">
  .hide{
    display: none;
  }
  #example{
    
  }
  </style>
</head>

<body style="min-height: 660px; cursor: auto;" class="edit">
  <!-- 头部工具栏 -->
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span
            class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="brand" href="#"><img src="./img/favicon.png"> 可视化布局<span class="label">BETA</span></a>
        <div class="nav-collapse collapse">
          <ul class="nav" id="menu-layoutit">
            <li class="divider-vertical"></li>
            <li>
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" id="edit" class="btn btn-primary active"><i
                    class="icon-edit icon-white"></i>编辑</button>
                <button type="button" class="btn btn-primary" id="devpreview"><i
                    class="icon-eye-close icon-white"></i>布局编辑</button>
                <button type="button" class="btn btn-primary" id="sourcepreview"><i
                    class="icon-eye-open icon-white"></i>预览</button>
              </div>
              <div class="btn-group">
                <button type="button" class="btn btn-primary" data-target="#downloadModal" rel="/build/downloadModal"
                  role="button" data-toggle="modal"><i class="icon-chevron-down icon-white"></i>下载</button>
                <button class="btn btn-primary" href="#" role="button" data-toggle="modal" data-target="#shareModal"><i
                    class="icon-share icon-white"></i>保存</button>
                <button class="btn btn-primary" href="#clear" id="clear"><i
                    class="icon-trash icon-white"></i>清空</button>
              </div>
              <div class="btn-group">
                <button class="btn btn-primary" href="#undo" id="undo"><i
                    class="icon-arrow-left icon-white"></i>撤销</button>
                <button class="btn btn-primary" href="#redo" id="redo"><i
                    class="icon-arrow-right icon-white"></i>重做</button>
              </div>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
  </div>
  <!-- 头部工具栏 -->
  <!-- 左侧工具栏 -->
  <div class="container-fluid">
    <div class="row-fluid">
      <div class="">
        <div class="sidebar-nav">
          <ul class="nav nav-list accordion-group">

            <li class="nav-header">
              <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                <div class="popover fade right">
                  <div class="arrow"></div>
                  <h3 class="popover-title">功能</h3>
                  <div class="popover-content">在这里设置你的栅格布局, 栅格总数默认为12, 用空格分割每列的栅格值, 如果您需要了解更多信息，请访问<a target="_blank"
                      href="http://twitter.github.io/bootstrap/scaffolding.html#gridSystem">Bootstrap栅格系统.</a></div>
                </div>
              </div>
              <i class="icon-plus icon-white"></i> 布局设置
            </li>
            <li style="display: list-item;" class="rows" id="estRows">
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="12" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span12 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="6 6" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span6 column"></div>
                  <div class="span6 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="8 4" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span8 column"></div>
                  <div class="span4 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="4 4 4" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span4 column"></div>
                  <div class="span4 column"></div>
                  <div class="span4 column"></div>
                </div>
              </div>
            </div>
            <div class="lyrow ui-draggable"> <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i class="icon-move"></i>拖动</span>
              <div class="preview">
                <input value="2 6 4" type="text">
              </div>
              <div class="view">
                <div class="row-fluid clearfix">
                  <div class="span2 column"></div>
                  <div class="span6 column"></div>
                  <div class="span4 column"></div>
                </div>
              </div>
            </div>
          </li>
          </ul>
          <ul class="nav nav-list accordion-group">
            <li class="nav-header"><i class="icon-plus icon-white"></i> 基本CSS
              <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                <div class="popover fade right">
                  <div class="arrow"></div>
                  <h3 class="popover-title">帮助</h3>
                  <div class="popover-content">这里提供了一系列基本元素样式，你可以通过区块右上角的编辑按钮修改样式设置。如需了解更多信息，请访问<a target="_blank"
                      href="http://twitter.github.io/bootstrap/base-css.html">基本CSS.</a></div>
                </div>
              </div>
            </li>
            <li style="display: none;" class="boxes" id="elmBase">

              <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i
                    class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i
                    class="icon-move"></i>拖动</span> <span class="configuration">
                  <button type="button" class="btn btn-mini" data-target="#editorModal" role="button"
                    data-toggle="modal">编辑</button>

                  <span class="btn-group"> <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">样式
                      <span class="caret"></span></a>
                    <ul class="dropdown-menu">         
                      <li class="active"><a href="#" rel="">默认</a></li>
                      <li class=""><a href="#" rel="img-rounded">圆角</a></li>
                      <li class=""><a href="#" rel="img-circle">圆圈</a></li>
                      <li class=""><a href="#" rel="img-polaroid">相框</a></li>
                    </ul>
                  </span> </span>
                <div class="preview">图片</div>
                <div class="view"> <img alt="140x140" src="./img/a.jpg"> </div>
              </div>
            </li>
            <!--1111 -->
          </ul>
          <ul class="nav nav-list accordion-group">
            <li class="nav-header"><i class="icon-plus icon-white"></i> 组件
              <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                <div class="popover fade right">
                  <div class="arrow"></div>
                  <h3 class="popover-title">帮助</h3>
                  <div class="popover-content">拖放组件到布局框内. 拖入后你可以设置组件样式. 查看这里获取更多帮助 <a target="_blank"
                      href="http://twitter.github.io/bootstrap/components.html">Components.</a></div>
                </div>
              </div>
            </li>
            <li style="display: none;" class="boxes" id="elmComponents">
              <div class="box box-element ui-draggable"> 
                  <a href="#close" class="remove label label-important">
                    <i class="icon-remove icon-white"></i>删除
                  </a> 
                  <span class="drag label"><i
                    class="icon-move"></i>拖动</span> <span class="configuration"><button type="button"
                    class="btn btn-mini" data-target="#editorModal" role="button" data-toggle="modal">编辑</button> <a
                    class="btn btn-mini" href="#" rel="well">嵌入</a> </span>
                <div class="preview">嵌入媒体</div>
                <div class="view">
                  <div class="media"> <a href="#" class="pull-left"> <img src="./img/a_002.jpg" class="media-object">
                    </a>
                    <div class="media-body" contenteditable="true">
                      <h4 class="media-heading">嵌入媒体标题</h4>
                      请尽量使用HTML5兼容的视频格式和视频代码实现视频播放, 以达到更好的体验效果.
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <ul class="nav nav-list accordion-group">
            <li class="nav-header"><i class="icon-plus icon-white"></i> 交互组件 <span
                class="label label-important">NEW!</span>
              <div class="pull-right popover-info"><i class="icon-question-sign "></i>
                <div class="popover fade right">
                  <div class="arrow"></div>
                  <h3 class="popover-title">帮助</h3>
                  <div class="popover-content">拖放组件到布局容器. 拖入后, 你可以配置显示样式. 如果有任何疑问可访问 <a target="_blank"
                      href="http://twitter.github.io/bootstrap/javascript.html">JavaScript.</a></div>
                </div>
              </div>
            </li>
            <li style="display: none;" class="boxes mute" id="elmJS">
              <div class="box box-element ui-draggable"> <a href="#close" class="remove label label-important"><i
                    class="icon-remove icon-white"></i>删除</a> <span class="drag label"><i
                    class="icon-move"></i>拖动</span>
                <div class="preview">遮罩窗体</div>
                <div class="view">

                  <a id="myModalLink" href="#myModalContainer" role="button" class="btn" data-toggle="modal"
                    contenteditable="true">触发遮罩窗体</a>


                  <div id="myModalContainer" class="modal hide fade" tabindex="-1" role="dialog"
                    aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                      <h3 id="myModalLabel" contenteditable="true">标题栏</h3>
                    </div>
                    <div class="modal-body">
                      <p contenteditable="true">显示信息</p>
                    </div>
                    <div class="modal-footer">
                      <button class="btn" data-dismiss="modal" aria-hidden="true" contenteditable="true">关闭</button>
                      <button class="btn btn-primary" contenteditable="true">保存设置</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box box-element ui-draggable">
                <a href="#close" class="remove label label-important"><i class="icon-remove icon-white"></i>删除</a>
                <span class="drag label"><i class="icon-move"></i>拖动</span>
                <span class="configuration"><button type="button" class="btn btn-mini" data-target="#editorModal"  role="button" data-toggle="modal">编辑</button></span>
                <div class="preview">轮换图</div>
                <div class="view">
                  <div class="carousel slide" id="myCarousel">
                    <ol class="carousel-indicators">
                      <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                      <li data-slide-to="1" data-target="#myCarousel" class=""></li>
                      <li data-slide-to="2" data-target="#myCarousel" class=""></li>
                    </ol>
                    <div class="carousel-inner">
                      <div class="item active"> <img alt="" src="./img/1.jpg">
                        <!-- <div class="carousel-caption" contenteditable="true">
                          <h4>棒球</h4>
                          <p>棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。</p>
                        </div> -->
                      </div>
                      <div class="item"> <img alt="" src="./img/2.jpg">
                        <div class="carousel-caption" contenteditable="true">
                          <h4>冲浪</h4>
                          <p>冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。</p>
                        </div>
                      </div>
                      <div class="item"> <img alt="" src="./img/3.jpg">
                        <div class="carousel-caption" contenteditable="true">
                          <h4>自行车</h4>
                          <p>以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。</p>
                        </div>
                      </div>
                    </div>
                    <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a> <a data-slide="next"
                      href="#myCarousel" class="right carousel-control">›</a>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--/span-->
      <div style="min-height: 590px;" class="demo ui-sortable"></div>
      <!--/span-->
      <div id="download-layout">
        <div class="container-fluid"></div>
      </div>
    </div>
    <!--/row-->
  </div>
  <!-- 左侧工具栏 -->
  <!--/.fluid-container-->
  <!-- 弹窗 -->
  <div class="modal hide fade" role="dialog" id="editorModal">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
      <h3>编辑</h3>
        <textarea id="contenteditor" style="visibility: hidden; display: none;">
        
        </textarea>
      </p>
    </div>
    <div class="modal-footer"> <a id="savecontent" class="btn btn-primary" data-dismiss="modal">保存</a> <a class="btn"
        data-dismiss="modal">关闭</a> </div>
  </div>
  <div class="modal hide fade" role="dialog" id="downloadModal" aria-hidden="true" style="display: none;">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
      <h3>下载</h3>
    </div>
    <div class="modal-body">
      <p>已在下面生成干净的HTML, 可以复制粘贴代码到你的项目.</p>
      <div class="btn-group">
        <button type="button" id="fluidPage" class="btn btn-info"><i class="icon-fullscreen icon-white"></i> 自适应宽度</button>
        <button type="button" class="btn btn-info active" id="fixedPage"><i class="icon-screenshot icon-white"></i> 固定宽度</button>
      </div>
      <br>
      <br>
      <p>
        <textarea></textarea>
      </p>
    </div>
    <div class="modal-footer"> <a class="btn" data-dismiss="modal">关闭</a> </div>
  </div>
  <div class="modal hide fade" role="dialog" id="shareModal" aria-hidden="true" style="display: none;">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
      <h3>保存</h3>
    </div>
    <div class="modal-body">保存成功</div>
    <div class="modal-footer"> <a class="btn" data-dismiss="modal">Close</a> </div>
  </div>
  <!-- 弹窗 -->

</body>
</html>